<template>
  <div class="adminbid">
    <div class="list priceList">
      <div>
        <div>
          <div class="pricetitle">报价列表</div>
        </div>

        <!-- 搜索 -->
        <div class="">
          <div class="search">
            <div>招标搜索：</div>
            <div>
              <el-input
                style="width: 240px"
                v-model="input2"
                class="w-50 m-2"
                placeholder="请输入内容"
                :suffix-icon="Search"
              />
            </div>
          </div>
          <div class="search">
            <div>招标分类：</div>
            <div class="Allsort">
              <div>全部分类</div>
              <div>办公用品</div>
              <div>通讯设备</div>
              <div>电子产品</div>
              <div>生活用品</div>
            </div>
          </div>
          <div class="search">
            <div>招标类型：</div>
            <div class="Allsort">
              <div>全部招标</div>
              <div>公开招标</div>
              <div>邀请招标</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 招标项目名称 -->
      <div class="projectName" v-for="item in 2" :key="item">
        <div style="margin: 20px 30px">
          <div class="projectNametop">
            <div>
              <div style="font-weight: bold; font-size: 16px">招标项目名称</div>
              <div class="projectCategory">
                <div><span>招标类别：</span> <span>办公用品</span></div>
                <div><span>招标方式：</span> <span>公开招标</span></div>
                <div><span>发布时间：</span> <span>2023-07-20</span></div>
                <div><span>截至时间：</span> <span>2023-08-30</span></div>
                <div><span>当前报价人数：</span> <span>12人</span></div>
              </div>
            </div>
            <div>
              <el-button type="primary" @click="priceDetails()">查看</el-button>
            </div>
          </div>
          <div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="supplier" label="供应商" />
              <el-table-column prop="name" label="负责人" />
              <el-table-column prop="phone" label="联系方式" />
              <el-table-column prop="onePrice" label="一次报价" />
              <el-table-column prop="twoPrice" label="二次报价" />
              <el-table-column prop="Controls" label="操作">
                <template #default>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick()"
                    >中标</el-button
                  >
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="priceDetails()"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="unfold">展开更多信息</div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pages">
        <el-pagination :total="1000" background layout="prev, pager, next" />
      </div>
    </div>
  </div>
</template>
 <script setup>
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 搜索关键词
const input2 = ref("");

// 招标信息
const tableData = [
  {
    supplier: "供应商名称",
    name: "Tom",
    phone: "15728586908",
    onePrice: "￥59039",
    twoPrice: "￥29999",
  },
  {
    supplier: "供应商名称",
    name: "Tom",
    phone: "15728586908",
    onePrice: "￥59039",
    twoPrice: "￥29999",
  },
  {
    supplier: "供应商名称",
    name: "Tom",
    phone: "15728586908",
    onePrice: "￥59039",
    twoPrice: "￥29999",
  },
  {
    supplier: "供应商名称",
    name: "Tom",
    phone: "15728586908",
    onePrice: "￥59039",
    twoPrice: "￥29999",
  },
];

// 跳转议价详情页面
const priceDetails = () => {
  router.push("/priceDetails");
};

// 中标按钮
const handleClick = () => {
  console.log(111);
};

// export default {
//   data() {
//     return {
//       input2: ref(""),
//       tableData: [
//         {
//           supplier: "供应商名称",
//           name: "Tom",
//           phone: "15728586908",
//           onePrice: "￥59039",
//           twoPrice: "￥29999",
//         },
//         {
//           supplier: "供应商名称",
//           name: "Tom",
//           phone: "15728586908",
//           onePrice: "￥59039",
//           twoPrice: "￥29999",
//         },
//         {
//           supplier: "供应商名称",
//           name: "Tom",
//           phone: "15728586908",
//           onePrice: "￥59039",
//           twoPrice: "￥29999",
//         },
//         {
//           supplier: "供应商名称",
//           name: "Tom",
//           phone: "15728586908",
//           onePrice: "￥59039",
//           twoPrice: "￥29999",
//         },
//       ],
//     };
//   },

//   methods: {
//     priceDetails() {
//       this.$router.push("./priceDetails");
//     },
//   },
// };
//
</script>

<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
</style>;
